<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>七海后台管理系统</title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <style>
        body {
            background-color: paleturquoise;
        }

        #upload {
            width: 120px;
            line-height: 40px;
            border-radius: 8px;
            border: 0;
            outline: none;
            background-color: #0b0825;
            color: #fff;
            cursor: pointer;
        }

        .tup {
            vertical-align: middle;
        }

        input {
            outline: none;
        }

        .add {
            width: 80px;
            line-height: 30px;
            border-radius: 8px;
            border: 0;
            outline: none;
            background-color: #0b0825;
            color: #fff;
            cursor: pointer;
        }

        textarea {
            border: 0;
            outline: 0;
        }
    </style>
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        {{include "./common/header.html"}}
        {{include "./common/side-menu.html"}}
        <div class="layui-body">
            <div style="padding:15px">
                <span class="layui-breadcrumb" lay-separator=">">
                    <a href="/">首页</a>
                    <a href="/add">文章添加</a>
                </span>
                <form action="/insert" class="layui-form" method="post" enctype="multipart/form-data">
                    <div class="layui-form-item">
                        <label class="layui-form-label">标题： </label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="title" autocomplete="off">
                        </div>
                    </div>

                    <div class="layui-form-item ">
                        <label class="layui-form-label ">封面: </label>

                        <input type="file" name="img" id="img" style="display: none;" autocomplete="off">
                        <div class="layui-input-inline">
                            <button id="upload" class="layui-btn">上传文件</button>
                        </div>

                    </div>

                    <div id="imgWrap" class="layui-form-item" style="display: none;">
                        <label class="layui-form-label">预览： </label>
                        <div class="layui-input-inline">
                            <img src="" id="preview-img" width="150px">
                        </div>
                    </div>

                    <div class="layui-form-item ">
                        <label class="layui-form-label ">作者： </label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="author" autocomplete="off">
                        </div>
                    </div>

                    <div class="layui-form-item ">
                        <label class="layui-form-label "> 审核： </label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value='0' checked title="待审核">
                            <input type="radio" name="status" value='1' title="已发布">
                            <input type="radio" name="status" value='2' title="未发布">
                        </div>
                    </div>

                    <div class="layui-form-item ">
                        <label class="layui-form-label "> 所属分类： </label>
                        <div class="layui-input-inline">
                            <select name="cat_id">
                                <option value="0">请选择</option>
                                {{each cats item index}}
                                <option value="{{item.cate_id}}">{{item.cate_name}}</option>
                                {{/each}}
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label "> 内容： </label>
                        <div class="layui-input-block">
                            <textarea name="content" cols="30" rows="10" class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal">添加</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>

            </div>
            </form>
        </div>
    </div>
    {{include "./common/footer.html" }}

    </div>
</body>
<script src="/static/js/jquery.js"></script>
<script src="/static/plugins/layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>

<script>
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
                .$ = layui.$;
        // 头部
        util.event('lay-header-event', {
            //左侧菜单
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', { icon: 0 });
            }
            , menuRight: function () {
                layer.open({
                    type: 1
                    , content: '<div style="padding:15px;">处理右侧面板的操作</div>'
                    , area: ['260px', '100%']
                    , offset: "rt"
                    , anim: 5
                    , shadeClose: true
                })
            }
        })
    })
    // 上传文件
    let Upload = document.getElementById('upload');
    let imgEle = document.getElementById('img');
    Upload.onclick = function (event) {
        imgEle.click();
        // return false;
        event.preventDefault();
    }
    imgEle.onchange = function () {
        let file = this.files[0]
        // 判断上传文件，没有上传就退出
        if (!file) {
            return
        }
        let fileReader = new FileReader()
        fileReader.readAsDataURL(file)
        fileReader.onload = function (e) {
            document.getElementById('preview').src = this.result;
            document.getElementById('imgWrap').style.display = '';
        }
    }
    // 初始化富文本编辑器
    const E = window.wangEditor
    const editor = new E('#demo')
    editor.create()
</script>

</html>